<template>
  <div class="loginhome" style="overflow: auto">
    <!-- 头部 -->
    <div class="loginheader">
      <span
        class="el-icon-caret-left"
        @click="goback"
        style="cursor: pointer"
      ></span>
      歌单
    </div>
    <!-- 图片区域 -->
    <div class="imgdiv">
      <img :src="playlist[myindex].coverImgUrl" class="songimg" />
      {{ playlist[myindex].name }}
    </div>
    <!-- 播放按钮 -->
    <div class="btndiv">
      <el-button type="primary" size="mini" @click="playall"
        >播放全部</el-button
      >
    </div>
    <!-- 音乐列表区域 -->
    <ul v-infinite-scroll="load">
      <li
        v-for="(item, index) in songlist"
        :key="index"
        @click="playsong(index)"
      >
        <img :src="item.al.picUrl" class="imgsty" />
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countinfo: [],
      playlist: [],
      myindex: "",
      count: 0,
      songlist: [],
    };
  },
  created() {
    var myindex = this.$route.query.myindex;
    var id = this.$route.query.id;
    this.myindex = myindex;
    this.id = id;
    this.getsonglist();
    this.getsongurl();
  },
  methods: {
    playall() {
      this.playsong(0);
    },
    playsong(index) {
      this.$router.push({
        path: "/playsong",
        query: { index: index, iscomesonglist: "2" },
      });
    },
    load() {
      this.count += 2;
    },
    // 获取播放歌曲的url
    getsongurl() {
      this.axios
        .get(`/playlist/detail?id=${this.id}`)
        .then((res) => {
          this.songlist = res.data.playlist.tracks;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getsonglist() {
      if (this.myindex !== -1) {
        // 获取账户信息
        this.axios
          .get(`/user/account`)
          .then((res) => {
            this.countinfo = res.data.profile;
            this.id = this.countinfo.userId;
            // 获取用户歌单
            this.axios
              .get(`/user/playlist?uid=${this.id}`)
              .then((res) => {
                this.playlist = res.data.playlist;
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //   返回按钮返回
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.btndiv {
  margin-top: 10px;
  margin-left: 38px;
}
.imgdiv {
  margin-top: 10px;
  margin-left: 38px;
}
.loginheader {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: red;
  border-bottom: red 1px solid;
  height: 30px;
}

.songimg {
  width: 100px;
  height: 100px;
}
.imgsty {
  width: 40px;
  height: 40px;
}
</style>